/*绘制路径
1. beginPath()：必须调用，告知要开始绘制路径
2. arc(x,y,半径，开始角度，结束角度，是否顺时针)：绘制圆弧
3. arcTo(x1,y1,x2,y2,半径)：给定半径，从(x1,y1)到(x2,y2)绘制圆弧
4. bezierCurveTo(c1x,c2y,c2x,c2y,x,y)：三次贝塞尔曲线，(c1x,c2y)和(c2x,c2y)为控制点
5. lineTo(x,y)：从上一点到(x,y)的直线
6. moveTo(x,y)：移动绘制光标
7. quadraticCurveTo(cx,cy,x,y)：二次贝塞尔曲线，(cx,cy)为控制点
8. rect(x,y,宽,高)：矩形路径
9. closePath()：绘制成线

------------------------
- fill：填充路径
- stroke：描画路径
*/

let paper=document.getElementById('paper')
if(paper.getContext){
    let context=paper.getContext("2d")
    context.beginPath()
    //外圆
    context.arc(100,100,99,0,2*Math.PI,false) //从(100,100)开始，逆时针从0度到360度绘制半径为99的圆弧

    // 内圆
    //---为什么有先用moveTo？
    //由于画完外圆后，结束点在外圆上，所以需要移动绘制光标到内圆上
    //否则，因为內圆的起始绘点与外圆的结束绘点不重合，
    //此时会有路径将两点连接，导致最后描画路径时多出一条横线
    context.moveTo(194,100)                    
    context.arc(100,100,94,0,2*Math.PI,false) 

    // 分针
    context.moveTo(100,100)
    context.lineTo(100,15)
    // 时针
    context.moveTo(100,100)
    context.lineTo(35,100)

    //描线
    context.strokeStyle="red"
    context.stroke()
    context.fillStyle="yellow"
    context.fill()
}
